<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=1024">
        <title>测试111111</title>
        <script src="/js/webim.config.js"></script>
        <script src='/js/strophe-1.2.8.min.js'></script>
        <script src='/js/websdk-1.4.12.min.js'></script>
        <link type="text/css" rel="stylesheet" href="/css/im.css"/>
    </head>
    <body>
        <input type="button" onclick="login()" value="登录" />
        <div class="im-switch"><img src="/image/im-switch.jpg" /></div>

        <div class="im-box">
            <div class="im-friends">
                <div class="im-friends-title">最近联系人</div>
                <ul class="im-friend-list">
                    <li class="im-friend-item current">
                        <img class="im-friend-avater" src="/image/avater.jpg" />
                        小xx
                    </li>
                </ul>
            </div>
            <div class="im-interaction">
                <div class="im-title">
                    <img class="im-avater" src="/image/avater.jpg" />
                    我和摸摸聊天
                    <span class="im-close" >关闭</span>
                </div>
                <ul class="im-messages" id="im-messages">

                </ul>
                <div class="im-send">
                    <ul class="im-tools">
                        <li class="im-tools-emoji">
                            <img id="emoji-switch" onclick="emojiSwitch()" src="/image/faces/ee_1.png" />
                            <ul class="emoji-list" id="emoji-list">
                                <li  emoji="[):]"><img src="/image/faces/ee_1.png" /></li>
                                <li  emoji="[:D]"><img src="/image/faces/ee_2.png" /></li>
                            </ul>
                        </li>
                    </ul>
                    <textarea id="sentMessage" class="im-send-text" placeholder="输入聊天内容"></textarea>
                    <button onclick="sendMessage()" class="im-send-btn">发送</button>
                </div>
            </div>
        </div>
        <script>



            var hxim = new hxim();
            function sendMessage(){
                var msgObj = document.getElementById("sentMessage");
                if(msgObj.value == ""){
                    return ;
                }
                hxim.sendText('cyy2',msgObj.value,function(id,serverMsgId){
                    msgObj.value = '';
                },function(){
                    console.log("发送错误");
                });
            }
            function emojiSwitch(){
                var tool = document.getElementById('emoji-list');
                tool.style.display = tool.style.display == 'none' ? 'block':'none';
            }
            function login(){
                hxim.login('cyy','123456','',function(token){
                    console.log("登录成功token:"+token);
                },function(){
                    console.log('登录失败');
                });
            }
            var cs = document.getElementById('emoji-list').getElementsByTagName('li');
            for(var i = 0 ;i < cs.length;i++){
                cs[i].addEventListener('click',function(){
                    var txt = document.getElementById("sentMessage");
                    var emoji = this.getAttribute('emoji');
                    txt.value = txt.value + emoji;
                    document.getElementById('emoji-switch').click();
                });
            }
        </script>
    </body>
</html>
